<template>
    <div>

        <slide :swipeList="swipeList" :isFull="true"></slide>

        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newsList">
                <img src="../../imgs/menu1.png">
                <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList">
                <img src="../../imgs/menu2.png">
                <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodsList">
                <img src="../../imgs/menu3.png">
                <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../imgs/menu4.png">
                <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../imgs/menu5.png">
                <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../imgs/menu6.png">
                <div class="mui-media-body">联系我们</div></a></li>
        </ul>
    </div>
</template>

<script>
    import Slide from "../subcom/Slide.vue";
    export default {
        name: "HomeContainer",
        data() {
            return {
                swipeList: [],//轮播图
            }
        },
        created() {
            this.getSwipe();
        },
        methods: {
            getSwipe() {
                this.axios.get('getLunbo')
                    .then(response => {
                        if (response.data.status === 0) {
                            this.swipeList = response.data.message
                        } else {
                            this.$toast('加载失败!');
                        }
                    })
            }
        },
        components: {
            slide: Slide,
        }
    }
</script>

<style scoped>

.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
    font-size: 6.4em;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    font-size: 25px;
    line-height: 25px;
    height: 30px;
}
.mui-icon .mui-badge {
    font-size: 25px;
    width: 37px;
}
.mui-grid-view.mui-grid-9 {
    background-color: white;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: none;
}
</style>